<template>
	<view>
		<uni-nav-bar @clickLeft="$tab.back()" left-icon="back" :border="false" :status-bar="true" title="新闻中心"
			background-color="#FA554E" color="#fff">
		</uni-nav-bar>

		<view class="bg-FFF">
			<u-tabs :list="tabList" lineColor="#DF2E2C" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#606266',
			    transform: 'scale(1)'
			}" @change="tabChange"></u-tabs>
		</view>

		<view class="p-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="refresh" :fixed="false">
				<view @click="navDetail(item.id)" v-for="(item,index) in list" :key="index"
					class="round-16 bg-FFF mt-24 p-32">
					<view class="flex items-center justify-between">
						<text class="u-line-1 text-32">{{item.title}}</text>
						<text class="mt-12 text-24 text-gray">{{item.createTime}}</text>
					</view>
					<view class="flex justify-between mt-24">
						<view class="u-line-2 mr-12">
							{{item.profile}}
						</view>
						<image v-if="item.icon" :src="item.icon" class="image-96 round-12" mode=""></image>
					</view>
				</view>
			</s-pull-scroll>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [],
				tabIndex: 0,
				list: []
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			navDetail(id) {
				this.$tab.nav(`/pages/mine/news/newsDetail?id=${id}`)
			},
			async getData() {
				const res = await this.$Api.index.cmsAppList()
				this.tabList = res.data
				this.refresh()
			},
			tabChange(e) {
				this.tabIndex = e.index
				this.refresh()
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.index.cms_list({
						pageNum: pullScroll.page,
						pageSize: 10,
						cmsId: this.tabList[this.tabIndex].id
					})

					this.list = this.list.concat(res.rows || []);
					if(res.total == 0){
						pullScroll.empty();
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
</style>